<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>React.createClass-创建一个react组件</title>
	<script src="./libs/16.2.0/react.js"></script>
	<script src="./libs/16.2.0/react-dom.js"></script>
	<script src="./libs/16.2.0/babel.js"></script>
</head>

<body>
	<div id="container"></div>
</body>

<script type="text/babel">
  //此种创建组件的方式：不推荐

  var welcomeStyle={color:'green',fontWeight:700}
  var nameStyle={color:'red',fontSize:40}

  /* 
    匿名函数方式声明组件 
    注意：组件函数名首字母必须大写
    props参数只是充当形参，可以修改
  */
  var HelloComponent=function(props){
    return <div>
          <span style={welcomeStyle}>{props.welcome}</span>
          <span style={nameStyle}>{props.name}</span>
    </div>  
  }
  
  /* 
    命名函数方式声明组件 
    注意：组件函数名首字母必须大写
    props参数只是充当形参，可以修改
  */
  function WorldComponent(props){
      return <div>
          <span style={welcomeStyle}>{props.welcome}</span>
          <span style={nameStyle}>{props.name}</span>
      </div>
  }
  

   {/*组件调用格式为单标签形式*/} 
   {/*通过自定义属性给自定义组件传值*/}
   {/*在组建内部通过`props.属性名`调用*/} 
   ReactDOM.render(
      <HelloComponent name="react" welcome='欢迎使用'/>,
      document.getElementById('container')
    );
</script> 
</html>
